<template>
	<view class="warter-layout flex-column position-relative" @click.stop="onClickItem()">
		<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
		<u-lazy-load borderStyleStr="16rpx 16rpx 0rpx 0rpx" :image="item.envelopePic" :index="index" height="360">
		</u-lazy-load>

		<!-- 标题 -->
		<view v-if="item.title" class="line-h2 fs30 c333 mt20 ml20"
			style="width: 305rpx;max-height: 80rpx;line-height: 40rpx;">
			{{ item.title }}
		</view>

		<!-- chapterName -->
		<view v-if="item.chapterName" class="flex">
			<view class="line-h1 fs22 cfff mt20 ml20 px10"
				style="max-width: 280rpx;line-height: 34rpx;height: 34rpx;background: linear-gradient(0deg, #FF843A, #F96E52);border-radius: 5rpx;">
				{{item.chapterName}}
			</view>
		</view>

		<!-- 名字,发布时间 -->
		<view class="flex mx20 mt30 align-center">
			<view class="line-h1 fs26 c333 ml10" style="width: 150rpx;">{{ item.author }}</view>
			<view class="fs24 ml-auto c999">
				<text class="fs24 c999 text-center"
					style="height: 24rpx;line-height: 24rpx;">{{getDate(item.publishTime)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import dateUtils from '@/common/date-utils.js';
	export default {
		name: 'article-waterfall-item',
		components: {},
		data() {
			return {}
		},
		props: {
			item: {
				type: Object,
				default: function() {
					return {
						author: "liujingxing",
						chapterId: 328,
						chapterName: "网络&amp;文件下载",
						envelopePic: "https://www.wanandroid.com/resources/image/pc/default_project_img.jpg",
						id: 10429,
						link: "https://www.wanandroid.com/blog/show/2707",
						projectLink: "https://github.com/liujingxing/RxHttp",
						publishTime: 1574352791000,
						superChapterId: 294,
						superChapterName: "开源项目主Tab",
						title: "RxHttp  OkHttp+RxJava 一条链发送请求，一行代码实现任意类中自动关闭请求，新一代Http请求神器"
					}
				}
			},
			index: {
				type: [Number, String]
			}
		},
		computed: {
			//计算属性
		},
		watch: {},
		mounted() {
			//挂载到实例上去之后调用
			this.$nextTick(() => {
				// Code that will run only after the
				// entire view has been rendered
			})
		},
		created() {
			//在实例创建完成后被立即调用
		},
		methods: {
			getDate: function(time) {
				return dateUtils.friendlyDate(time)
				// return dateUtils.getDateFormat(time)
			},
			onClickItem: function() {
				// {
				// 	"apkLink": "",
				// 	"audit": 1,
				// 	"author": "",
				// 	"canEdit": false,
				// 	"chapterId": 502,
				// 	"chapterName": "自助",
				// 	"collect": false,
				// 	"courseId": 13,
				// 	"desc": "",
				// 	"descMd": "",
				// 	"envelopePic": "",
				// 	"fresh": false,
				// 	"host": "",
				// 	"id": 19369,
				// 	"link": "https://juejin.cn/post/6995614602352394277",
				// 	"niceDate": "2天前",
				// 	"niceShareDate": "2天前",
				// 	"origin": "",
				// 	"prefix": "",
				// 	"projectLink": "",
				// 	"publishTime": 1628817840000,
				// 	"realSuperChapterId": 493,
				// 	"selfVisible": 0,
				// 	"shareDate": 1628817840000,
				// 	"shareUser": "蝶舞落红尘",
				// 	"superChapterId": 494,
				// 	"superChapterName": "广场Tab",
				// 	"tags": [{
				// 		"name": "公众号",
				// 		"url": "/wxarticle/list/408/1"
				// 	}],
				// 	"title": "【JVM入门食用指南】JVM内存管理",
				// 	"type": 0,
				// 	"userId": 22830,
				// 	"visible": 1,
				// 	"zan": 0
				// }
				this.$navTo(`/packages/article/article-detail?url=${encodeURIComponent(this.item.link)}`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warter-layout {
		width: 360rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;
		margin-top: 10rpx;
		padding-bottom: 25rpx;
	}
</style>
